---
title: Alert
package: "@chakra-ui/alert"
image: "components/alert.svg"
description:
  Alerts are used to communicate a state that affects a system, feature or page.
---

Alerts are used to communicate a state that affects a system, feature or page.

<ComponentLinks
  theme={{ componentName: "alert" }}
  github={{ package: "alert" }}
  npm={{ package: "@chakra-ui/alert" }}
/>

<carbon-ad></carbon-ad>

## Import

Chakra UI exports 4 alert related components.

- `Alert`: The wrapper for alert components.
- `AlertIcon`: The visual icon for the alert that changes based on the `status`
  prop.
- `AlertTitle`: The title of the alert to be announced by screen readers.
- `AlertDescription`: The description of the alert to be announced by screen
  readers.

```js
import {
  Alert,
  AlertIcon,
  AlertTitle,
  AlertDescription,
} from "@chakra-ui/react"
```

## Usage

```jsx
<Alert status="error">
  <AlertIcon />
  <AlertTitle mr={2}>Your browser is outdated!</AlertTitle>
  <AlertDescription>Your Chakra experience may be degraded.</AlertDescription>
  <CloseButton position="absolute" right="8px" top="8px" />
</Alert>
```

### Status

Change the status of the alerts by passing the `status` prop. This affects the
color scheme and icon used. Alert supports `error`, `success`, `warning`, and
`info` statuses.

```jsx
<Stack spacing={3}>
  <Alert status="error">
    <AlertIcon />
    There was an error processing your request
  </Alert>

  <Alert status="success">
    <AlertIcon />
    Data uploaded to the server. Fire on!
  </Alert>

  <Alert status="warning">
    <AlertIcon />
    Seems your account is about expire, upgrade now
  </Alert>

  <Alert status="info">
    <AlertIcon />
    Chakra is going live on August 30th. Get ready!
  </Alert>
</Stack>
```

### Variant

`Alert` has 4 variant styles you can use. Pass the `variant` prop and use either
`subtle`, `solid`, `left-accent` or `top-accent`.

```jsx
<Stack spacing={3}>
  <Alert status="success" variant="subtle">
    <AlertIcon />
    Data uploaded to the server. Fire on!
  </Alert>

  <Alert status="success" variant="solid">
    <AlertIcon />
    Data uploaded to the server. Fire on!
  </Alert>

  <Alert status="success" variant="left-accent">
    <AlertIcon />
    Data uploaded to the server. Fire on!
  </Alert>

  <Alert status="success" variant="top-accent">
    <AlertIcon />
    Data uploaded to the server. Fire on!
  </Alert>
</Stack>
```

### Composition

`Alert` ships with smaller components to allow for flexibility in creating all
kinds of layouts. Here's an example of a custom alert style and layout:

```jsx
<Alert
  status="success"
  variant="subtle"
  flexDirection="column"
  alignItems="center"
  justifyContent="center"
  textAlign="center"
  height="200px"
>
  <AlertIcon boxSize="40px" mr={0} />
  <AlertTitle mt={4} mb={1} fontSize="lg">
    Application submitted!
  </AlertTitle>
  <AlertDescription maxWidth="sm">
    Thanks for submitting your application. Our team will get back to you soon.
  </AlertDescription>
</Alert>
```

`Alert` can also incorporate other Chakra components. Here's an example of an
alert with wrapping description text:

```jsx
<Alert status="success">
  <AlertIcon />
  <Box flex="1">
    <AlertTitle>Success!</AlertTitle>
    <AlertDescription display="block">
      Your application has been received. We will review your application and
      respond within the next 48 hours.
    </AlertDescription>
  </Box>
  <CloseButton position="absolute" right="8px" top="8px" />
</Alert>
```

## Props

### Alert Props

`Alert` is the wrapper for `Alert` component. It composes the `Flex` component.

<PropsTable of="Alert" />

### AlertIcon Props

`AlertIcon` composes `Icon` and changes the icon based on the `status` prop.

### AlertTitle Props

`AlertTitle` composes the `Box` component.

### AlertDescription Props

`AlertDescription` composes the `Box` component.
